// 1. 
// react.min.js    react  17.0.2 
// react-dom.min.js   react-dom  17.0.2 
// browser.min.js     javascript/XML
// 2.  
// react.min.js   react 核心文件  包含了react diff 算法 虚拟DOM 模型 react事件机制  
// 提供创建组件的API  createClass Component

// react-dom.min.js  封装了操作react 组件API  负责把虚拟DOM 渲染 render 成真实DOM
// ReactDOM.render()

// browser.min.js  负责解析 jsx 代码 ,  js内的html代码解析出来返回给浏览器

// 3.  type="text/babel"  允许js 里面  书写 html  代码 (jsx)

// 4. ReactDOM.render(虚拟DOM,真实DOM)
//  ReactDOM.render(<Component/>,app);
//  React.createElement()   创建虚拟DOM 

// 5. data-reactroot 表面当前元素是 该组件的顶层标签 
// 任何组件都只能有一个顶层标签

// 6. jsx 语法规则 
// 遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；
// 遇到代码块（以 { 开头），就用 JavaScript 规则解析

// 7. 注释   组件内部注释  
//  { /* <h1>{txt}</h1>  */ }


export class MyCpt extends Component{
  render(){
    return (
      <div>
        <h2> 组件定义  </h2>
        <p>任何组件都只能有一个顶层标签</p>
        <div>
          wuhan2107-daydayup
        </div>
        <MyDemo></MyDemo>
        <MyLike></MyLike>
      </div>
    )
  }
}

class MyDemo extends Component{
  render(){
    const word = "2107-大声背面试题 "
    return (
      <div>
        <h2> Demo- DEmo - 最简单的组件 </h2>
        <h3>word == {word} </h3>
      </div>
    )
  }
}

function MyLike(){
  return (
    <div>
        <h2> MyLike - MyLike - 纯函数组件  </h2>
    </div>
  )
}